<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div{
        width: 780px;
        height: 624px;
        background-color: transparent;
        border-radius: 10px 0px 10px 0px;
        border: 1px solid transparent;
        margin:auto;
    }
    .img{
        border-radius: 10px 0px 10px 0px;
        border: 2px solid rgb(110,167,243);
        width: 150px;
        height: 148px;
    }
</style>
<body>
    <script>
        let pic = 0 
        while(true){
            pic = +prompt('请输入要渲染的英雄数量')
            if(pic >=1 && pic<=20){
                break;
            }
            else{
                alert('重新输入')
            }
        }
        document.write(`<div>`)
            for(let j = 1 ; j <=pic ;j++){
                document.write(`<img src="./题目/题目/核心练习作业素材/images/${j}.webp" alt"">`)
            }
            document.write(`</div>`)
    </script>
</body>
</html>